<template>
	
		<div class="action-row">
	
			<el-button type="primary" plain @click="handleDo('','act_add')" >
				<template #icon><i-ep-plus /></template>新增</el-button>
			<el-button v-hasPerm="['asset.Asset/update']" @click="handleDo('', 'act_edit')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-edit/></template>修改</el-button>
			<el-button v-hasPerm="['asset.Asset/delete']"  @click="handleDo('', 'act_del')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-delete/></template>删除</el-button>	
		</div>
		<el-table  v-loading="loading" :data="tableData" 
			align="left" 
			tooltip-effect="dark"
			:show-overflow-tooltip="true"  border 
			@cell-mouse-enter="rowMouse"
			@cell-mouse-leave="menuLineVisible=false"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column type="index" label="序号" align="center" width="80" />
			<el-table-column label="字段名称" align="center" prop="name"></el-table-column>
			<el-table-column label="字段类型" align="center" prop="type">
				<template #default="scope">
					<template v-if="scope.row.type== 'text'">
						<el-tag type="info">{{retunTxt(scope.row.input_type,'text')}}</el-tag>
					</template>
					<template v-if="scope.row.type== 'textarea'">
						<el-tag type="info">{{retunTxt(scope.row.type,'textarea')}}</el-tag>
					</template>
					<template v-if="scope.row.type== 'radio'">
						<el-tag type="info">单选按钮</el-tag>
					</template>
					<template v-if="scope.row.type== 'checkbox'">
						<el-tag type="info">多选按钮</el-tag>
					</template>
					<template v-if="scope.row.type== 'select'">
						<el-tag type="info">下拉选择</el-tag>
					</template>
					<template v-if="scope.row.type== 'switch'">
						<el-tag type="info">开关按钮</el-tag>
					</template>
					<template v-if="scope.row.type== 'file'">
						<el-tag v-if="scope.row.multiple==0 && scope.row.upload_type=='image'" type="info">图片
							(单)</el-tag>
						<el-tag v-if="scope.row.multiple==1 && scope.row.upload_type=='image'" type="info">图片
							(多)</el-tag>
						<el-tag v-if="scope.row.multiple==0 && scope.row.upload_type=='file'" type="info">文件
							(单)</el-tag>
						<el-tag v-if="scope.row.multiple==1 && scope.row.upload_type=='file'" type="info">文件
							(多)</el-tag>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="字段变量名" align="center" prop="field">
				<template #default="scope">
					{{scope.row.field}}
				</template>
			</el-table-column>
			<el-table-column label="排序" align="center" prop="sort"></el-table-column>
			
		</el-table>
	
	<!-- 添加字段 -->
	<el-dialog v-model="dialogAdd.visible" 
		:title="dialogAdd.title"
		:close-on-click-modal="false" 
		:close-on-press-escape="false"
		class="elDiaLog" lock-scroll 
		width="1000px" @close="handleCancleAddField">
		<el-form ref="dataFormRef" :model="formFeildData"  label-width="130px">
			<el-form-item required label="类目名称" prop="class_id">
				<el-tree-select :disabled="true" v-model="formFeildData.class_id" placeholder="选择上级菜单"
					:data="menuOptions" :props="{
                                label: 'class_name',
                                children: 'children',
                                value: 'id',
                            }" filterable check-strictly :render-after-expand="false" />
			</el-form-item>
			<el-form-item label="字段变量名" prop="field">
				<el-input v-model="formFeildData.field" placeholder="请输入字段变量名" />
			</el-form-item>
			<el-form-item label="字段名称" prop="name">
				<el-input v-model="formFeildData.name" placeholder="请输入字段名称" />
			</el-form-item>
			<el-form-item label="字段类别" prop="type">
				<el-select v-model="formFeildData.type" placeholder="请选择现字段类别" style="width: 100%">
					<el-option v-for="(item, index) in typeItem" :key="index" :label="item.name" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-if="formFeildData.type=='text'" label="字段类型" prop="input_type">
				<el-select v-model="formFeildData.input_type" placeholder="请选择现字段类型" style="width: 100%">
					<el-option v-for="(item, index) in input_type" :key="index" :label="item.name" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item
				v-if="formFeildData.type=='select' || formFeildData.type=='checkbox' || formFeildData.type=='radio'"
				label="配置参数" prop="parameter">
				<el-input v-model="formFeildData.parameter" :rows="5" type="textarea"
					placeholder="1=>1111&#10;2=>222&#10;3=>333&#10;" />
			</el-form-item>
			<el-form-item v-if="formFeildData.type=='file'" label="上传类型" prop="upload_type">
				<el-radio-group v-model="formFeildData.upload_type" class="ml-4">
					<el-radio v-for="(item, index) in upload_type" :value="item.value"
						size="large">{{item.name}}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="formFeildData.type=='file'" label="是否多图/多文件" prop="multiple">
				<el-radio-group v-model="formFeildData.multiple" class="ml-4">
					<el-radio v-for="(item, index) in upload_multiple" :value="item.value"
						size="large">{{item.name}}</el-radio>

				</el-radio-group>
			</el-form-item>
			<el-form-item label="排序" prop="sort">
				<el-input v-model="formFeildData.sort" placeholder="请输入排序值" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="loadingAdd" @click="handleSubmitField">确定</el-button>
				<el-button @click="handleCancleAddField">取消</el-button>
			</div>
		</template>
	</el-dialog>

</template>
<script setup lang="ts">
	defineOptions({
		name: "Stockroom",
		inheritAttrs: false,
	});

	//接口地址
	import {
		getAssetFieldsAdd,
		getAssetFieldsEidt,
		getAssetFieldsDel,
		getAssetFieldsDetail,
		getAssetOptions
	} from "@/api/asset";
	//接口地址
	const emit = defineEmits(['successBack']);
	const props = defineProps<{
		cell : any;
		menuOptions : any;
	}>();
	const queryParams = reactive<any>({
		page: 1,
		limit: 20,
		id: ""
	})
	const loading = ref(false);
	const loadingAdd = ref(false)
	const ids = ref<number[]>([]);

	const tableData = ref([]);// table表格数据
	const multipleSelection =ref<any>([]);
	const menuLineVisible =ref(true);
	const rowR = ref<any>({});

	const dialogAdd = reactive<any>({
		title: "添加信息", //弹窗标题
		visible: false,   //弹窗显示or隐藏
		status: "add_art", //弹窗状态类型  :添加 add_art 编辑 edit_art 详情 detail_art  
		value: {}   		  //携带整条参数 row
	});

	const formFeildData = ref({
		class_id: "",
		field: "",
		name: "",
		type: "",
		input_type: "",
		parameter: "",
		upload_type: "image",
		multiple: 0,
		sort: 0,
		id: ""
	});
	const upload_type = reactive([{ value: 'image', name: "图片" }, { value: 'file', name: "文件" }])
	const upload_multiple = reactive([{ value: 0, name: "否" }, { value: 1, name: "是" }])
	
	const typeItem = reactive([
		{ value: 'text', name: "文本框" },
		{ value: 'textarea', name: "多行文本" },
		{ value: 'radio', name: "单选框" },
		{ value: 'checkbox', name: "多选" },
		{ value: 'select', name: "下拉框" },
		{ value: 'file', name: "文件上传" },
		{ value: 'switch', name: "开关" }])
		
	const input_type = reactive([
		{ value: 'text', name: "单行文本" },
		{ value: 'datetime', name: "日期时间" },
		{ value: 'startimeEndtime', name: "起止日期" },
		{ value: 'date', name: "日期" },
		{ value: 'time', name: "时间" },
		{ value: 'number', name: "数字" },
		{ value: 'color', name: "颜色" }])

	// 行菜单事件
	function rowMouse(row:any) {
		menuLineVisible.value = true
		rowR.value = row
	}
	// 数据多选事件
	function handleSelectionChange(val:any) {
		multipleSelection.value = val
	}
	// 操作按钮样式
	function buttonType(val:number) {
		if (val === 1) {
			return 'primary'
		} else {
			return 'info'
		}
	}
	
	// 操作
	 function handleDo(row:any, act:string) {
		dialogAdd.status = act
		formFeildData.value.class_id = queryParams.id;
		switch (act) {
			case 'act_add':
				dialogAdd.visible = true;
				dialogAdd.title = '添加信息';
				formFeildData.value.id = "";
				formFeildData.value.name = ""
				formFeildData.value.field = ""
				formFeildData.value.type = ""
				formFeildData.value.input_type = ""
				formFeildData.value.parameter = ""
				formFeildData.value.upload_type = "image"
				formFeildData.value.multiple = 0
				formFeildData.value.sort = 0
				break
			case 'act_edit':
				var rowItem= JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
				dialogAdd.visible = true;
				dialogAdd.title = '修改信息';
				dialogAdd.value = rowItem;
				getAssetFieldsDetail({ id: rowItem.id }).then((res) => {
					console.log(res);
					formFeildData.value.id = rowItem.id;
					formFeildData.value.name = res.data.name
					formFeildData.value.field = res.data.field
					formFeildData.value.type = res.data.type
					formFeildData.value.input_type = res.data.input_type
					formFeildData.value.parameter = res.data.parameter
					formFeildData.value.upload_type = res.data.upload_type
					formFeildData.value.multiple = res.data.multiple
					formFeildData.value.sort = res.data.sort
				
				}).finally(() => {
					loading.value = false;
				})
				break
			case 'act_del':
				handleDelete(JSON.parse(JSON.stringify(row || multipleSelection.value[0])))
				break
			default:	
		}
	}
	


	function retunTxt(e:any, type:any) {
		// return input_type.filter((item)=> item.value == e)[0].name;
		if (type == "text") {
			var item = input_type.find((ite) => ite.value === e);
			return item ? item.name : "异常";
		}
		else if (type == "textarea") {
			var item = typeItem.find((ite) => ite.value === e);
			return item ? item.name : "异常";
		}
	}

	function handleQuery() {
		loading.value = true;
		getAssetOptions(queryParams).then((res) => {
			console.log(res);
			tableData.value = res.data;
		}).finally(() => {
			loading.value = false;
		})
	}
	function handleDelete(row:any) {
		const Ids =row.id;
		if (!Ids) {
			ElMessage.warning("请勾选删除项");
			return;
		}
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(() => {
			loading.value = true;
			getAssetFieldsDel({
				id: Ids
			}).then((res) => {
				console.log(res)
				ElMessage({
					message: '删除成功',
					type: 'success'
				})
				handleQuery();

			}).finally(() => {
				loading.value = false;
			})
		}, function () {
			console.log('取消删除')
		});
	}
	
	/**
	 * 添加字段Sub
	 */
	function handleSubmitField() {
		

		loadingAdd.value = true;
		if (formFeildData.value.id) {
			getAssetFieldsEidt(formFeildData.value).then((res) => {
				console.log(res);
				ElMessage({
					message: '字段修改成功',
					type: 'success',
				})
				dialogAdd.visible = false;
				handleQuery();
			}).finally(() => {
					loadingAdd.value = false;
			})
		}
		else {
			getAssetFieldsAdd(formFeildData.value).then((res) => {
				console.log(res);
				ElMessage({
					message: '字段添加成功',
					type: 'success',
				})
				dialogAdd.visible = false;
				handleQuery();
			}).finally(() => {
				loadingAdd.value = false;
			})
		}
	}
	function handleCancleAddField() {
		dialogAdd.visible = false;
	}

	onMounted(() => {
		queryParams.id = props.cell.id;
		handleQuery();

	})
</script>


<style scoped>

</style>